<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" media="all" />

		<style type="text/css">
			.layui-table th,
			.layui-table td {
				text-align: center;
			}

			.layui-form {
				margin-top: 20px;
			}

			.li_button {
				float: right;
				margin-right: 80px;
			}

			.search_btn {
				margin-left: -10px;
			}

			body {
				width: 100%;
				height: 100%;
			}

			#popUpdateTest {
				text-align: center;
			}

			.logo-title {
				text-align: left;
				letter-spacing: 2px;
				margin: 14px 20px;
			}

			.logo-title h1 {
				font-size: 25px;
				font-weight: bold;
			}

			.layui-form {
				background-color: #fff;
			}

			.layui-form .layui-form-item label {
				width: 120px;
			}

			.layui-form .layui-form-item input {
				line-height: 36px;
			}

			.add_btn {
				margin-top: 50px;
				text-align: center;
			}

			body .msgSkin .layui-layer-content {
				background-color: #FF5722;
				color: #fff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<form class="layui-form" action="" layui-filter="li_form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">场景</label>
					<div class="layui-input-inline">
						<select name="modules" lay-verify="required" lay-search="" lay-filter="li_select">
							<option value="1">全部联系人</option>
							<option value="2">我负责的联系人</option>
						</select>
					</div>
				</div>

				<div class="layui-inline" style="position: relative;width: 400px;">
					<div class="li_search">
						<div class="layui-input-inline" id="search_box" style="width: 300px;">
							<i class="layui-btn layui-btn-xs layui-btn-primary layui-btn-radius layui-icon layui-icon-close layui-hide" id="inputClear"
							 style="position: absolute;float: right;right: 10px;top: 8px;"></i>
							<input class="layui-input" type="text" name="id" id="li_input" autocomplete="off" placeholder="请输入联系人名称" style="width: 300px;"/>
						</div>
						<div class="layui-btn search_btn" data-type="reload" id="search_btn" style="float: right;margin-right: 11px;">搜索 <i class="layui-icon">&#xe615;</i></div>
					</div>
				</div>


				<div class="layui-btn-group li_button" id="li_button">
					<button type="button" class="layui-btn" data-method="offset" data-type="auto" id="li_create">添加联系人<i class="layui-icon">&#xe654;</i></button>
					<button type="button" class="layui-btn layui-btn-danger" id="li_del">批量删除<i class="layui-icon">&#xe640;</i></button>
				</div>
			</div>
		</form>


		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<table class="layui-hide" id="tb" lay-filter="li_demo" style="margin-top: 50px;"></table>
		<!--<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit"  id="li_edit"><i class="layui-icon">&#xe642;</i>编辑</a>
		    &lt;!&ndash;<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>&ndash;&gt;
		</script>-->

		<script type="text/javascript">
			$(function() {
				layui.use(["laypage", "table", "form", "laydate", "layer"], function() {
					var laypage = layui.laypage;
					var page, limit;
					var $ = layui.jquery;
					var form = layui.form;
					var table = layui.table;
					var element = layui.element;
					var laydate = layui.laydate;
					var layer = layui.layer;
					var popForm = layui.form;

					//1.表格渲染
					table.render({
						elem: '#tb',
						url: '../linkman/findAll',
						toolbar: '#toolbarDemo',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						height: 750,
						title: '联系人数据表',
						cols: [
							[
								{
									type: 'checkbox',
									fixed: 'left'
								}, {
									field: 'id',
									title: 'ID',
									width: 100,
									sort: true,
									fixed: true,
									hide: true
								}, {
									field: 'li_name',
									title: '姓名',
									width: 200,
									fixed: true
								}, {
									field: 'cu_name',
									title: '客户名称',
									width: 200,
									templet: function(data) {
										/*for(var i=0;i<data.length;i++){
											return data.customer.cu_name
										}*/
										return data.customer.cu_name
									}
								}, {
									field: 'li_phone',
									title: '手机',
									width: 200
								}, {
									field: 'li_e_mail',
									title: '邮箱',
									width: 200
								}, {
									field: 'li_job',
									title: '职务',
									width: 200,
									sort: true
								}, {
									field: 'li_policymaker',
									title: '是否关键决策人',
									width: 100
								}, {
									field: 'li_next_time',
									title: '下次联系时间',
									width: 200,
									sort: true,
									templet: function(data) {
										return data.customer.cu_next_time
										/*for(var i=0;i<data.length;i++){
											return data.customer.cu_next_time
										}*/

									}
								}, {
									field: 'li_comment',
									title: '备注',
									width: 200
								}, {
									field: 'li_sex',
									title: '性别',
									width: 100
								}, {
									field: 'li_principal',
									title: '负责人',
									width: 200,
								templet: function(data) {
									if (data.li_principal==sessionStorage.getItem("username")) {
										return "本人"
									}else {
										return data.li_principal
									}
								}
								}, {
									field: 'li_create_time',
									title: '创建时间',
									width: 200,
									sort: true,
									templet: function(data) {
										return data.li_create_time
									}
								}, {
									fixed: 'right',
									title: '操作',
									width: 100,
									align: 'center',
									//toolbar: '#barDemo'
								templet: function(data) {
									if(data.li_principal==sessionStorage.getItem("username")||sessionStorage.getItem("userid")=="1"){
										return '<a class="layui-btn layui-btn-xs" lay-event="edit"  id="li_edit"><i class="layui-icon">&#xe642;</i>编辑</a>'
									}else {
										return '<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon">&#xe642;</i>编辑</a>'
									}
								}
								}
							]
						],
						/*data: [{
							"id": 1,
							"li_name": "李四",
							"cu_name": "有限公司",
							"li_phone": "15487965214",
							"li_e_mail": "142548@qq.com",
							"li_job": "经理",
							"li_policymaker": "是",
							"li_next_time": "2020-10-10",
							"li_comment": "不知道要写什么,就随便写了,随便写了........",
							"li_sex": "男",
							"li_principal": "DENY",
							"li_create_time": "2020-10-10"

						}],*/
						page: true,
						id: 'testReload',
						parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
							return {
								"code": res.code,
								"msg": res.msg,
								"count": res.count,
								"data": res.data
							}
						}

					});


					//2.监听表格复选框选择
					table.on('checkbox(li_demo)', function(obj) {
						console.log(obj)
					});



					//3.监听表格操作
					table.on('tool(li_demo)', function(obj) {
						var data = obj.data;
						var layEvent = obj.event;
						var tr = obj.tr;

						if (layEvent === 'del') {
							layer.confirm('真的删除ID为：' + data.id + "的用户吗?", function(index) {
								console.log(data.id);
								$.ajax({
									url: '../linkman/deleteLinkman',
									type: 'POST',
									data: {
										'id': data.id
									},
									success: function(massage) {
										if (massage.msg == 'success') {
											obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
											layer.close(index);
											console.log(index);
											layer.msg("删除成功", {
												icon: 1
											});
										} else {
											layer.msg("删除失败", {
												icon: 5
											});
										}
									}
								});
								layer.close(index);
							});

						} else if (layEvent === 'edit') { //编辑
							console.log(data);
							layer.open({
								type: 1,
								title: "修改客户信息",
								shade: 0.8,
								area: ['1000px', '70%'],
								shadeClose: false,
								content: $("#popUpdateTest")
							});
							setFormValue(obj, data);

						}
					});

					//监听弹出框表单提交，massage是修改界面的表单数据'submit(),是修改按钮的绑定
					function setFormValue(obj, data) {
						console.log(data);
						popForm.val("popupFormFilter", {
							id: data.id,
							li_name: data.li_name,
							cu_name: data.customer.cu_name,
							li_phone: data.li_phone,
							li_e_mail: data.li_e_mail,
							li_job: data.li_job,
							li_policymaker: data.li_policymaker,
							li_next_time: data.li_next_time,
							li_comment: data.li_comment,
							li_sex: data.li_sex,
							li_principal: data.li_principal,
							li_create_time: data.li_create_time
						});


						form.on('submit(save)', function(massage) {
							console.log("message=" + JSON.stringify(massage.field))
                            console.log(data.id)
                            var li_id=data.id;
							$.ajax({
								url: '../linkman/updateLinkman',
								type: 'POST',
								data: {
									id: li_id,
									li_name: massage.field.li_name,
									cu_name: massage.field.cu_name,
									li_phone: massage.field.li_phone,
									li_e_mail: massage.field.li_e_mail,
									li_job: massage.field.li_job,
									li_policymaker: massage.field.li_policymaker,
									li_next_time: massage.field.li_next_time,
									li_comment: massage.field.li_comment,
									li_sex: massage.field.li_sex,
									li_principal: massage.field.li_principal,
									li_create_time: massage.field.li_create_time
								},
								success: function(msg) {
									var returnCode = msg.code;
									if (returnCode == 200) {
										layer.msg("修改成功", {
											icon: 6
										});
										setTimeout(function() {
											obj.update({
												id: massage.field.id,
												li_name: massage.field.li_name,
												cu_name: massage.field.cu_name,
												li_phone: massage.field.li_phone,
												li_e_mail: massage.field.li_e_mail,
												li_job: massage.field.li_job,
												li_policymaker: massage.field.li_policymaker,
												li_next_time: massage.field.li_next_time,
												li_comment: massage.field.li_comment,
												li_sex: massage.field.li_sex,
												li_principal: massage.field.li_principal,
												li_create_time: massage.field.li_create_time
											});
											layer.closeAll();
										}, 1000);
									} else {
										layer.msg("修改失败", {
											icon: 5
										});
									}
								},
								error: function() {
									layer.msg('后台异常！未添加成功');
								}
							})
							//阻止页面跳转
							return false;
						})
					}



					//4.下拉选择框的监听
					form.on('select(li_select)', function(data) {
						console.log(data.value);
						var cu_userid = data.value;
						if (cu_userid == 1) {
							table.reload('testReload', {
								url: '../linkman/findAll',
								page: {
									curr: 1
								}
							});
						} else {
							table.reload('testReload', {
								url: '../linkman/findByUserId',
								where: {
									li_userid:sessionStorage.getItem("userid")

								},
								page: {
									curr: 1
								}
							});
						}

					});


					//5.创建客户弹出层
					$("#li_create").click(function() {
						layer.open({
							type: 2,
							shadeClose: true,
							shade: 0.8,
							area: ['1000px', '70%'],
							shadeClose: false,
							content: 'addLinkMan.html',
						});
					});

					//6.删除所有客户
					$("#li_del").click(function() {
						var checkStatus = table.checkStatus('testReload');
						var data = checkStatus.data;
						console.log("data=" + data)
						var ids = [];
						data.forEach(function(n, i) {
							ids.push(n.id);
						});
						console.log("ids=" + ids)
						if (ids != '') {
							layer.confirm('确定删除所选项吗？', function(index) {
								console.log("ids====" + JSON.stringify(ids) + "=====")
								$.ajax({
									url: '../linkman/deleteLinkman',
									type: 'POST',
									contentType: "application/json",
									dataType: 'JSON',
									data: JSON.stringify(ids),
									success: function(data) {
										if (data.code === 200) {
											layer.msg('删除成功');
											table.reload('testReload', {});
										} else {
											layer.msg('删除失败');
										}
									},
									error: function() {
										layer.msg('系统错误');
									}
								})
							})
						} else {
							layer.msg('请选择需要删除的行', {
								skin: 'msgSkin'
							});

						}
					});

					//7.搜索按钮
					$('#search_btn').click(function() {
						var inputVal = $('#li_input').val();
						console.log(inputVal);
						if (inputVal == '' || inputVal == null) {
							table.reload('testReload', {
								url: '../linkman/findAll',
								where: {
									li_name: inputVal

								},
								page: {
									curr: 1
								}
							});
						} else {
							table.reload('testReload', {
								url: '../linkman/findByName',

								where: {
									li_name: inputVal

								},
								page: {
									curr: 1
								}
							});
						}
					});


					//键盘enter键
					$('.layui-input').keydown(function(e) {
						if (e.which == 13) {
							$("#search_btn").click();
						}
					});

					//8.清空输入框
					//显示清空按钮
					$('#search_box').mouseover(function() {
						var inputVal = $(li_input).val();
						$('#inputClear').removeClass('layui-hide');
					})

					//不显示清空按钮
					$('#search_box').mouseout(function() {
						var inputVal = $(li_input).val();
						$('#inputClear').addClass('layui-hide');
					})

					$('#inputClear').click(function() {
						var inputVal = $('#li_input').val();
						if (inputVal != '' || inputVal != null) {
							console.log("清空输入框")
							$('#li_input').val('');
						}
					})

					// 编辑联系人=====================================
					//1.下拉选择框的监听
					form.on('select(li_policymaker)', function(data) {
						console.log(data.value);
					});

					//1.下拉选择框的监听
					form.on('select(li_job)', function(data) {
						console.log(data.value);
					});
					
					form.on('select(li_sex)', function(data) {
						console.log(data.value);
					});

					//2.日期选择
					laydate.render({
						elem: '#cu_next_time',
						type: 'datetime',
						trigger: 'click',
						format: 'yyyy-MM-dd HH:mm:ss',
						min: minDate(),
						theme: '#393D49',
						done: function(value, date, endDate) {
							console.log(value);
						}
					});

					// 设置最小可选的日期
					function minDate() {
						var now = new Date();
						return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
					}

					//3.取消并关闭页面
					$("#colseBtn").click(function(data) {
						console.log("关闭")
						layer.closeAll();
						return false;
					});

					//4.监听submit提交按钮 button
					form.on('submit(save)', function(data) {
						console.log("已提交")
						console.log(JSON.stringify(data.field))
						console.log($('#popupForm').serialize())
						$.ajax({
							type: "POST",
							dataType: "JSON",
							url: "../customer/saveCustomer",
							data: $('#popupForm').serialize(),
							success: function(result) {
								if (result.msg == "success") {
									layer.msg('添加成功，1秒后自动关闭该窗口');
									setTimeout(function() {
										var index = parent.layer.getFrameIndex(window.name);
										parent.layer.close(index);
										parent.layui.table.reload('testReload', {
											page: {
												curr: 1
											}
										});
									}, 1 * 1000);
								};
							},
							error: function() {
								layer.msg('后台异常！未添加成功');
							}
						});
						return false;
					});

					//6.自定义表单验证
					form.verify({
						user: function(value) {
							if (value.length < 2) {
								return '用户名至少得2个字符啊';
							}
						},
						pass: [
							/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
						],
						content: function(value) {
							layedit.sync(editIndex);
						}
					});

				})
			})
		</script>

		<!-- 这里是弹出层的表单信息 -->
		<div class="layui-login-background" id="popUpdateTest" style="display:none;">
			<div class="layui-form layui-form">
				<form class="layui-form" action="" id="popupForm" lay-filter="popupFormFilter">
					<div class="layui-form-item logo-title">
						<h1>修改联系人</h1>
						<div class="" style="">
							<div class="base_icon" style="width: 5px;height: 15px; background: #01AAED;display: inline-block;"></div>
							<h1 style="font-size:16px;margin-top: 10px;display: inline-block;">基本信息</h1>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" for="li_name"><span style="color: red;">*</span>姓名</label>
							<div class="layui-input-inline">
								<input type="text" name="li_name" id="li_name" lay-verify="required" autocomplete="off" class="layui-input" />
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label" for="cu_name"><span style="color: red;">*</span>客户名称</label>
							<div class="layui-input-inline">
								<input type="text" name="cu_name" id="cu_name" lay-verify="required" autocomplete="off" class="layui-input" disabled="disabled" style="color: #aaaaaa"/>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">手机</label>
							<div class="layui-input-inline">
								<input type="tel" name="li_phone" id="li_phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">邮箱</label>
							<div class="layui-input-inline">
								<input type="text" name="li_e_mail" id="li_e_mail" lay-verify="email" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" for="li_job">职务</label>
							<div class="layui-input-inline">
								<select name="li_job" id="li_job" lay-verify="required">
									<option value=""></option>
									<option value="经理">经理</option>
									<option value="总监">总监</option>
									<option value="普通职员">普通职员</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label" for="li_comment">备注</label>
							<div class="layui-input-inline">
								<input type="text" name="li_comment" id="li_comment" lay-verify="required" autocomplete="off" class="layui-input" />
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" for="li_sex">性别</label>
							<div class="layui-input-inline">
								<select name="li_sex" id="li_sex" lay-verify="required" lay-filter="li_sex">
									<option value=""></option>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label" for="li_policymaker">是否为关键决策人</label>
							<div class="layui-input-inline">
								<select name="li_policymaker" id="li_policymaker" lay-verify="required" lay-filter="li_policymaker">
									<option value=""></option>
									<option value="是">是</option>
									<option value="否">否</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item add_btn">
						<button type="reset" class="layui-btn layui-btn-primary" lay-filter="cancel" id="colseBtn">取消</button>
						<button class="layui-btn" lay-submit="save" lay-filter="save">保存</button>
					</div>
				</form>
			</div>
		</div>
		</div>
	</body>
</html>
